<template>
  <Modal
    :title="title"
    v-model="model"
    :mask-closable="!isExpire"
    :closable="!isExpire"
    @on-cancel="onClose"
    width="540">
    <div style="padding: 30px 16px">
      <div v-if="isExpire">请设置新密码。设置后，您可继续使用PC功能</div>
      <div v-else>
        您的密码将在
        <span style="color: red">{{ num }}天</span>
        后过期，过期后将无法登录，请尽快设置新密码
      </div>
    </div>
    <template #footer>
      <Button @click="onClose">
        {{ isExpire ? '退出登录' : '稍后设置' }}
      </Button>
      <Button type="primary" @click="onConfirm">立即设置</Button>
    </template>
  </Modal>
</template>

<script setup>
  import { ref, watch } from 'vue'
  import moment from 'moment'
  import router from '@/router'
  import { userStore } from '@/store/user'

  const emits = defineEmits('success')
  const model = ref()
  const [title, isExpire, num] = [ref(), ref(), ref()]

  watch(
    () => userStore().expire,
    (res) => {
      let sub = moment(res).diff(moment(), 'days')
      num.value = sub
      if (sub <= 3) {
        model.value = true
        isExpire.value = sub <= 0
        title.value = isExpire.value ? '您的密码已过期' : '您的密码即将过期'
      } else {
        model.value = false
        isExpire.value = false
        title.value = null
      }
    },
    {
      immediate: true
    }
  )

  function onClose() {
    model.value = false
    if (isExpire.value) router.goLogin()
  }

  function onConfirm() {
    emits('success')
    if (!isExpire.value) model.value = false
  }
</script>

<style lang="scss" scoped></style>
